<template>
  <div class="app-container">
    <el-table v-loading="loading" :data="tableData">
      <el-table-column
        v-for="item in columnsData"
        :key="item"
        :label="item.colHeadName"
        :prop="item.colKey"
      >
        <template #default="scope">
          <span v-if="scope.$index === tableData.length-1  && addFlag">
            <el-select
              v-if="item.inputType ==='select'"
              v-model="tableForm[item.colKey]"
              placeholder="请选择"
            >
              <el-option key="" label="请选择" value="" />
            </el-select>
            <el-input 
              v-if="item.inputType ==='input'"
              v-model="tableForm[item.colKey]"
            ></el-input>
          </span>
          <span v-else>{{ scope.row[item.colKey] }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template #default="scope">
          <el-tooltip content="保存" placement="top" v-if="scope.$index === tableData.length-1  && addFlag">
            <el-button link type="primary" icon="DocumentChecked" @click="handleSave()"></el-button>
          </el-tooltip>
          <el-tooltip content="清除" placement="top" v-if="scope.$index === tableData.length-1  && addFlag">
            <el-button link type="primary" icon="CircleClose" @click="handleClear(scope.row)"></el-button>
          </el-tooltip>
          <el-tooltip content="删除" placement="top" v-if="scope.$index === tableData.length-1  && addFlag">
            <el-button link type="danger" icon="Delete" @click="handleDelete(scope.row)"></el-button>
          </el-tooltip>
          <el-tooltip content="修改" placement="top" v-if="(scope.$index !== tableData.length-1 && addFlag) || !addFlag">
            <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row, 'edit')" ></el-button>
          </el-tooltip>
          <el-tooltip content="查看" placement="top" v-if="(scope.$index !== tableData.length-1 && addFlag) || !addFlag">
            <el-button link type="primary" icon="View" @click="handleUpdate(scope.row, 'look')" ></el-button>
          </el-tooltip>
          <el-tooltip content="删除" placement="top" v-if="(scope.$index !== tableData.length-1 && addFlag) || !addFlag">
            <el-button link type="danger" icon="Delete" @click="handleDelete(scope.row)"></el-button>
          </el-tooltip>
        </template>
      </el-table-column>
    </el-table>
    <div style="text-align: center;margin-top: 24px;" v-if="pageType === 'edit'">
      <el-button type="primary"  @click="addData">添加</el-button>
      <el-button type="primary" @click="uploadFile">上传</el-button>
    </div>
    <el-dialog v-model="dialogTableVisible" title="上传" width="800" :close-on-click-modal="false">
      <el-upload
        class="upload-demo"
        drag
        action=""
      >
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">
          请点击这里上传文件
        </div>
        <template #tip>
          <div class="el-upload__tip">
            jpg/png files with a size less than 500kb
          </div>
        </template>
      </el-upload>
    </el-dialog>
  </div>
</template>

<script setup name="ParamCode">
const route = useRoute();
const listId = route.params && route.params.listId
const pageType = route.query && route.query.from

const loading = ref(false)
const columnsData = ref([
  {colHeadName: '姓名', colKey: 'name', inputType: 'input' },
  {colHeadName: '年龄', colKey: 'age', inputType: 'input' },
  {colHeadName: '性别', colKey: 'sex', inputType: 'select' },
  {colHeadName: '常驻城市', colKey: 'city', inputType: 'select' },

])
const tableData = ref([
  { name: '年龄1', age: '23', sex: '女', city: '北京' },
  { name: '年龄2', age: '24', sex: '女', city: '天津' },
  { name: '年龄3', age: '25', sex: '女', city: '上海' },
  { name: '年龄4', age: '26', sex: '女', city: '北京' },
  { name: '年龄5', age: '27', sex: '男', city: '北京' },
])
const addFlag = ref(false)

const tableForm = ref({})

const dialogTableVisible = ref(false)


 /** 添加 */
 function addData () {
  if(addFlag.value) return
  tableData.value.push({...tableForm.value})
  addFlag.value = true
}
function handleSave() {
  addFlag.value = false
}
function handleClear (row) {
  tableForm.value = {}
}
function handleDelete() {
  tableData.value.pop()
  addFlag.value = false
}

function uploadFile () {
  dialogTableVisible.value = true
}
</script>
